<template>
  <div>
    <el-divider content-position="center">订单记录</el-divider>
    <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="oid"
          label="订单编号"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="aname"
          label="用户"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          label="合同">
        <template slot-scope="scope">
          <a target="_blank" :href="scope.row.csrc">{{ scope.row.cname }}</a>
        </template>
      </el-table-column>
      <el-table-column
          prop="ostatus"
          label="订单状态"
          width="180">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.ostatus === '0' ? 'danger' : 'success'"
              disable-transitions>{{ scope.row.ostatus === '0' ? '未支付' : '已支付' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看详情" placement="top-start">
            <el-button @click="openDetail(scope.row)" icon="el-icon-search" type="success" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="支付" placement="top-start">
            <el-button :disabled="scope.row.ostatus === '1'" @click="pay(scope.row)" type="warning" icon="el-icon-s-goods" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button @click="deleteOrder(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
        title="订单列表!"
        :visible.sync="table"
        direction="ltr"
        size="50%">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="fname" label="产品名称" width="200"></el-table-column>
        <el-table-column property="snum" label="购买数量"></el-table-column>
        <el-table-column property="fprice" label="单价/元"></el-table-column>
        <el-table-column
            prop="address"
            label="图片">
          <template slot-scope="{row}">
            <el-image
                style="width: 50px; height: 50px"
                :src="row.fimg"
                fit="fill"></el-image>
          </template>
        </el-table-column>
      </el-table>
      <div style="font-size: x-large;text-align: right;margin-top: 20px;margin-right: 40px">
        <span>总金额:</span>
        <div class="order-price" style="color: red;">
          {{totalPrice}} ￥
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "OrderRecord",
  data() {
    return {
      tableData: [],
      table: false,
      gridData: [],
      totalPrice: 0
    }
  },
  methods: {
    openDetail(row) {
      console.log(row)
      this.table = !this.table
      axios({
        url: `http://localhost:8081/order/getOrderDetail/${row.oid}`,
        method: 'get'
      }).then(res => {
        console.log(res)
        this.gridData = res.data.data
        this.totalPrice = 0
        this.gridData.forEach(list => {
          this.totalPrice = this.totalPrice + (parseFloat(list.fprice) * parseFloat(list.snum))
        })
      }).catch(err => {
        console.log(err)
      })
    },
    deleteOrder(row){
      console.log(row)
      this.$confirm('删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method:'get',
          url:`http://localhost:8081/order/deleteOrder/${row.oid}`
        }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          setInterval(function () {
            location.href = '/orderRecord'
          },1000)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    pay(row) {
      console.log(row)
      this.$confirm('确认支付吗？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        axios({
          url: `http://localhost:8081/order/getOrderDetail/${row.oid}`,
          method: 'get'
        }).then(res => {
          console.log(res)
          this.gridData = res.data.data
          localStorage.setItem("productList", JSON.stringify(this.gridData))
          localStorage.setItem("oId",row.oid)
          this.$router.push("/orderConfirm")
        }).catch(err => {
          console.log(err)
        })
      }).catch(action => {
        this.$message({
          type: 'info',
          message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
        })
      });
    }
  },
  mounted() {
    let agency = JSON.parse(sessionStorage.getItem("agency"))
    axios({
      method: 'get',
      url: `http://localhost:8081/order/getOrderListByUser/${agency.aid}`
    }).then(res => {
      this.tableData = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
